<template>
  <div class="admin">
    <div class="top">
      <el-input v-model.trim="adminName" placeholder="请输入管理员名称" size="small" @keyup.enter="initData()" clearable style="margin-right:10px;width:400px" />
      <el-button type="primary" @click="initData()" v-btnkey='"sys:admin:list"' :icon='Search'>查询</el-button>
      <el-button type="primary" @click="addOrAmend(1)" v-btnkey='"sys:admin:create"' :icon="Edit">添加</el-button>
    </div>
    <!-- 表格列表 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="管理员ID" prop="id" width="180">
      </el-table-column>
      <el-table-column label="管理员名称" prop="username" width="180">
      </el-table-column>
      <el-table-column label="真实姓名" prop="realname" width="180">
      </el-table-column>
      <el-table-column label="电话" prop="phone" width="180">
      </el-table-column>
      <el-table-column label="管理员角色" width="180">
        <template #default="scope">
          <el-space wrap>
            <el-tag v-for="(item,index) in scope.row.roleIds" :key="index">
              {{adminRole(item)}}
            </el-tag>
          </el-space>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" v-btnkey='"sys:admin:edit"' @click="addOrAmend(0,scope.row)">修改</el-button>
          <el-button size="small" type="danger" v-btnkey='"sys:admin:delete"' @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加弹出框 -->
    <el-dialog v-model="dialogFormVisible" :title="bool?'创建':'修改'" :destroy-on-close="true">
      <el-form :model="form" ref="formRef">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop='username' :rules='[{required:true,message:"请输入用户名"}]'>
          <el-input v-model.trim="form.username" autocomplete="off" :disabled='!bool' />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop='password' :rules='[{required:true,message:"请输入密码"},{pattern:/^[a-zA-Z0-9]{6,11}$/,message:"请输入6~11位的英文或数字"}]' v-if="bool">
          <el-input v-model.trim="form.password" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop='phone' :rules='[{required:true,message:"请输入手机号"},{ pattern: /^1[3|5|7|8|9]\d{9}$/, message:"请输入正确的号码格式",trigger: "blur"}]'>
          <el-input v-model.trim="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth" prop='realname' :rules='[{required:true,message:"请输入用户名"},{ pattern: /^[\u4E00-\u9FA5]{1,}$/, message:"请输入中文",trigger: "blur"}]'>
          <el-input v-model.trim="form.realname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth" prop="roleIds" :rules='[{required:!bool,message:"请选择角色"}]'>
          <el-select v-model="form.roleIds" placeholder="请选择角色" multiple filterable allow-create default-first-option>
            <el-option :label="item.label" :value="item.value" v-for="item in roleOptions" :key="item.value">
              {{item.label}}
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="newly('formRef')">{{bool?'新增':'修改'}}</el-button>
          <el-button @click="$refs.formRef.resetFields()">重置</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页组件 -->
    <Paging v-bind="pageData" @pageChang='pageChangs'></Paging>
  </div>
</template>
<script>
import { post } from "@/utils/http";
import { Edit, Search } from '@element-plus/icons-vue';
import Paging from "@/components/Paging/Paging.vue";
export default {
  components: {
    Paging
  },
  setup() {
    return { Edit, Search }
  },
  data() {
    return {
      adminName: '',  //搜索管理员名称
      tableData: [],  //表格数据
      pageData: {  //分页数据
        total: 0, //总条数
        currentPage: 1,  //页数
        pageSize: 10  //每页条数
      },
      dialogFormVisible: false,  //添加弹出框显示
      formLabelWidth: '120px',
      form: {
        username: '',
        password: '',
        phone: '',
        realname: '',
        roleIds: '',
        id: 0
      },
      roleOptions: [],  //管理员角色
      bool: null  //判断是添加还是修改
    }
  },
  methods: {
    // 初始化数据
    initData() {
      post({ _gp: 'admin', _mt: 'list', username: this.adminName, page: this.pageData.currentPage, limit: this.pageData.pageSize }).then(res => {
        if (200 == res.errno) {
          this.pageData.total = res.data.total //赋值总条数
          this.tableData = res.data.items
        } else {
          ElMessage.warning(res.errmsg)
        }
      })
    },
    // 添加或修改角色
    addOrAmend(boolNum, row) {
      this.bool = boolNum
      this.dialogFormVisible = true
      if (boolNum) return this.form = {}    //添加清空表单
      Object.assign(this.form, row)
    },
    // 管理员角色列表
    adminRole(item) {
      for (const s of this.roleOptions) {
        if (item == s.value) return s.label
      }
      // return this.roleOptions.find(i=>i.value==item).label
    },
    // 新增或者修改确定
    newly(formRef) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          if (this.bool) { //新增操作
            post({ _gp: 'admin', _mt: 'create', adminDTO: JSON.stringify(this.form) }).then(res => {
              if (200 == res.errno) {
                this.dialogFormVisible = false
                ElMessage.success('成功')
                this.initData()
              } else {
                ElMessage.error(res.errmsg)
              }
            })
          } else {  //修改数据
            post({ _gp: 'admin', _mt: 'edit', adminDTO: JSON.stringify(this.form) }).then(res => {
              if (200 == res.errno) {
                this.dialogFormVisible = false
                ElMessage.success('成功')
                this.initData()
              }
            })
          }
        }
      })
    },
    // 删除
    handleDelete(index, row) {
      ElMessageBox.confirm(
        '是否要删除',
        "提示",
        {
          type: 'warning'
        }
      )
        .then(() => {
          post({ _gp: 'admin', _mt: 'delete', id: row.id }).then(res => {
            if (200 == res.errno) {
              ElMessage.success('成功')
              this.initData()
            }
          })
        })
    },
    // 分页
    pageChangs(e) {
      Object.assign(this.pageData, e)
      this.initData()
    }
  },
  created() {
    post({ _gp: 'admin.role', _mt: "options" }).then(res => {
      this.roleOptions = res.data
    })
    this.initData()
  }
}
</script>

<style lang="less" scoped>
.top {
  margin-bottom: 20px;
}
</style>